<template>
  <div>
    <h2>条件判断指令</h2>
    <!-- vue提供了两个条件判断指令,封呗是 v-show 和 v-if -->
    <!-- 
      相同点:都能控制元素的显示和隐藏
      不同点:当条件为false的时候
      v-show是通过display:none来让元素隐藏:
      v-if直接把元素溢出了 从而让元素隐藏
     -->

     <!-- 如果是一个元素 经常切换他的显示隐藏状态 用v-show 更好-->
     <!-- 如果起始条件是false v-show也会创建元素 创建后让元素display:none,所以v-show有更好的初始渲染代价 -->
  <p v-show="flag">我通过v-show控制</p>
  <p v-if="flag">我通过v-if控制</p>
  </div>
</template>

<script>
export default {
  data (){
    return{
      flag:true
    }
  }
}
</script>

<style>

</style>